<template>
  <div id="benefit">
    <Header goback="true" headerTitle="我的优惠"></Header>
    <div class="benefit-content paddingTop">
      <div class="tabs">
        <div class="tab-item" @click="changeTabTitle('red')">
          <span :class="{ 'tab-title': tabTitle == 'red' }">红包</span>
        </div>
        <div class="tab-item" @click="changeTabTitle('sjmoney')">
          <span :class="{ 'tab-title': tabTitle == 'sjmoney' }"
            >商家代金券</span
          >
        </div>
      </div>
      <div class="content-list">
        <div class="content-top">
          <p v-if="isRedItem" class="title-red-num">
            有 <span>{{ redList.length }}</span> 红包即将到期
          </p>
          <router-link class="top-shuomin" to="/benefit">
            <span class="iconfont icon-bangzhu help-icon"></span
            ><span>红包说明</span>
          </router-link>
        </div>
        <div class="content-center">
          <router-link
            class="center-item"
            v-for="item in redList"
            to="/benefit"
            :key="item.id"
          >
            <div class="item-left">
              <p class="money-num">
                ￥<b class="big-num">{{ item.bigNum }}</b
                >{{ item.smallNum }}
              </p>
              <p>{{ item.conditions }}</p>
            </div>
            <div class="item-right">
              <div>
                <p class="item-share">分享红包</p>
                <p class="item-share">{{ item.endTime }}到期</p>
                <p>限收货手机号为</p>
                <p class="item-share">{{ item.tel }}</p>
              </div>
              <!-- item.endTime -->
              <span v-if="item.endDay > 0" class="item-endday"
                >剩{{ item.endDay }}日</span
              >
              <span v-else>已失效</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Header from "../../components/header/header";
export default {
  data() {
    return {
      tabTitle: "red",
      isRedItem: true,
      redList: [
        {
          id: 0,
          money: 4.5,
          conditions: "满20元可用",
          endTime: "2021-11-18",
          tel: "15926348715",
        },
        {
          id: 1,
          money: 3.0,
          conditions: "满30元可用",
          endTime: "2021-11-25",
          tel: "15926348715",
        },
        {
          id: 2,
          money: 2.0,
          conditions: "满20元可用",
          endTime: "2021-11-22",
          tel: "15926348715",
        },
        {
          id: 2,
          money: 2.0,
          conditions: "满20元可用",
          endTime: "2021-11-1",
          tel: "15926348715",
        },
      ],
    };
  },
  components: { Header },
  mounted() {
    //处理价格，分离小数点前后的数字，计算红包剩余天数
    this.redList.forEach((item) => {
      // console.log(item);

      let endDay = Math.ceil(
        (new Date(item.endTime).getTime() - new Date().getTime()) /
          60 /
          60 /
          60 /
          24
      );

      console.log(endDay);
      let moneyNum = item.money.toFixed(1).split(".");
      console.log(moneyNum);
      let bigNum = moneyNum[0];
      let len = moneyNum.length;
      let smallNum = moneyNum[len - 1];
      //在到前mounted阶段，这样添加和修改data数据，view视图的数据才会更新
      Vue.set(item, "endDay", endDay);
      Vue.set(item, "bigNum", bigNum);
      Vue.set(item, "smallNum", smallNum);
    });
  },
  computed: {},
  methods: {
    changeTabTitle(tabTitle) {
      this.tabTitle = tabTitle;
    },
  },
  watch: {
    redList: function (value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.tabs {
  display: flex;
  background: white;
  @include wh(100%, 2rem);
  //tab层
  .tab-item {
    flex: 1;
    // display: block;
    // @include wh(100%, 100%);
    // line-height: 2rem;
    // text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    @include sc(0.75rem, black);
    font-weight: 500;
    span {
      //解决点击抖动问题
      padding-bottom: 0.2rem;
      border-bottom: 0.05rem solid white;
    }
    //选中状态的样式
    .tab-title {
      color: $blue;
      border-bottom-color: $blue;
    }
  }
}
//红包列表
.content-list {
  padding: 0.2rem 0.6rem;
}
//红包总量 红包说明
.content-top {
  // display: flex;
  @include fj;
  height: 1.75rem;
  align-items: center;
  //总数量
  .title-red-num {
    @include sc(0.6rem, #666666);
    span {
      color: #ff5340;
    }
  }
  //说明
  .top-shuomin {
    display: flex;
    align-items: center;

    span {
      @include sc(0.6rem, $blue);
    }
    .help-icon {
      padding-right: 0.2rem;
    }
  }
}
.content-center {
  .center-item {
    display: flex;
    padding: 1rem 0.4rem 0.4rem 0.6rem;
    background: url(../../../static/images/hongbao.png) white repeat-x;
    // background: #fff url(../../images/hongbao.png) repeat-x;
    background-size: 0.5rem 0.2rem;
  }
}
</style>
